<template>
  <div class="graph-view">
    <div class="api-toggle">
      <button 
        :class="{ active: apiEndpoint === 'graph' }" 
        @click="switchAPI('graph')"
      >
        标准图谱
      </button>
      <button 
        :class="{ active: apiEndpoint === 'entity-graph' }" 
        @click="switchAPI('entity-graph')"
      >
        实体关系图谱
      </button>
      <button 
        :class="{ active: apiEndpoint === 'test-graph' }" 
        @click="switchAPI('test-graph')"
      >
        测试图谱
      </button>
    </div>
    
    <knowledge-graph 
      :api-url="apiUrl" 
      :token="token"
      :api-endpoint="apiEndpoint"
    />
  </div>
</template>

<script>
import KnowledgeGraph from '../components/KnowledgeGraph.vue';

export default {
  name: 'GraphView',
  components: {
    KnowledgeGraph
  },
  data() {
    return {
      apiUrl: 'http://localhost:8000',
      token: '',
      apiEndpoint: 'test-graph'  // 默认使用测试图谱端点
    };
  },
  mounted() {
    this.token = localStorage.getItem('token') || '';
    
    if (!this.token) {
      this.$router.push('/login');
    }
  },
  methods: {
    switchAPI(endpoint) {
      this.apiEndpoint = endpoint;
    }
  }
};
</script>

<style scoped>
.graph-view {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.api-toggle {
  position: absolute;
  top: 10px;
  left: 320px;  /* 避免被侧边栏遮挡 */
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.api-toggle button {
  padding: 6px 12px;
  margin: 0 5px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.api-toggle button.active {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}
</style> 